<!--  以后项目的根组件 -->

<!-- template主要放html元素的（html的页面结构） -->
<template>
    <div id="app-container">
        <!-- 1.利用 mint-ui 中的 header 组件来实现整个系统的头部 -->
        <!-- <mt-header fixed title="没事多笑笑" class="topBar"></mt-header> -->
        <!-- 2.利用 router-view 来进行占位 -->
        <!-- transition 标签用来执行动画效果 -->
        <transition>
            <router-view></router-view>
        </transition>
        <!-- <router-link to="/home">前往首页</router-link> -->
        <!-- 3.利用 mui 中的 tabbar 的组件实现系统的底部 -->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/vip">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">E-mail</span>
            </router-link>
            <router-link class="mui-tab-item" to="/car">
                <span class="mui-icon mui-icon-contact">
                    <span class="mui-badge">0</span>
                </span>
                <span class="mui-tab-label">联系人</span>
            </router-link>
            <router-link class="mui-tab-item" to="/search">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设一下</span>
            </router-link>
        </nav>
    </div>
</template>

<script>
// 导入 miu-ui 中的 js component 组件，这种组件只能在哪里用在哪里导入

// 负责导出.vue这个组件对象（本质上是一个vue的对象，所以vue中该定义的元素都可以使用）
export default {
    data() {
        return {
            msg: "back",
            str: ""
        };
    },
    methods: {
        tip: function() {
            this.$toast("你好!!");
        },
        geturl: function() {
            let str = window.location.href.split("/");
            this.str = str;
        },
        setMainH(e) {
            console.log(e, 123);
            // var container = document.getElementById("app-container");
            // container.style.height = window.innerHeight - 50 + "px";
            // document.getElementsByClassName('content-box')[0].style.height = document.getElementsByClassName('content-box')[0].clientHeight - 40 +'px'
        }
    },
    created() {
        this.geturl();
    },
    beforeMount() {},
    mounted() {
        // this.setMainH();
    },
    beforeUpdate() {
        // 有数据，在数据渲染之前调用
    },
    updated() {
        // 有数据，在渲染之后调用
    },
    beforeDestroy() {},
    destroyed() {}
};
</script>

<style lang="less">
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mint-header {
    box-shadow: 0px 0px 2px #ffffff;
    -o-box-shadow: 0px 0px 2px #ffffff;
    -ms-box-shadow: 0px 0px 2px #ffffff;
    -moz-box-shadow: 0px 0px 2px #ffffff;
    -webkit-box-shadow: 0px 0px 2px #ffffff;
}
// .mui-bar.mui-bar-tab {
//     border-top: 1px solid red;
// }
#app-container {
    height: 100%;
    overflow: hidden;
    .mint-header {
        height: 40px;
        transition: 0.3s all;
    }
    #tmpl {
        margin-top: 0;
        padding-top: 40px;
        padding-bottom: 50px;
        overflow: hidden;
        width: 100%;
        height: 100%;
        transition: 0.3s all;
        .mint-header {
            top: 0;
        }
        .content-box {
            height: 100%;
            overflow: scroll;
            background-color: #ffffff;
            // padding-bottom: 80px;
        }
    }
    #tmpl.hideEle {
        padding-top: 0;
        header {
            top: -70px;
        }
    }

    .mui-bar{
        -webkit-box-shadow: 0 0 1px rgba(173, 173, 173, 0.85);
        box-shadow: 0 0 1px rgba(173, 173, 173, 0.85);
    }
}
/* 定义主页切换动画效果 */
.v-enter {
    opacity: 0;
    transform: translateX(100%);
}
.v-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
}
.v-enter-active,
.v-leave-active {
    transition: all 0.5s ease;
}
</style>
